<!DOCTYPE html>
<html>
  <head>
    <title>Project Grothendieck</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript" src="libs/d3.v2.js"></script>
    <script type="text/javascript" src="brain.js"></script>
    <script type="text/javascript" src="pool/sampledata.js"></script>
    <script type="text/javascript" src="pool/Pool.js"></script>
    <script type="text/javascript" src="pool/Generators.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
            $( "button" )
            .button()
            .click(function( event ) {
                event.preventDefault();
            });
            
    });
    
    function showErrors() {
      if (gerror.msg.length > 0) {
        $('#errors').html('')
        $('#notifier').show('blind', {}, 500)
        var html = '<ol>'
        for (var i = 0; i < gerror.msg.length; ++i) {
          html += '<li>' + gerror.msg[i] + '</li>'
        }
        html += '</ol>'  
        $('#errors').html(html)
        gerror.msg = []
      }
    }
    
    function hideErrors() {
      $('#notifier').hide('blind', {}, 500)
    }

    function ASselect_changed(s) {
      var value = s.value
      if (value == 0) { //generate
        $('#cas_raw').hide('blind', {}, 250, function() {
          $('#cas_gen').show('blind', {}, 250)
        })
      } else if (value == 1) {
        $('#cas_gen').hide('blind', {}, 250, function() {
          $('#cas_raw').show('blind', {}, 250)
        })
      }
    }
    
    function Mselect_changed(s) {
      var value = s.value
      if (value == 0) { //generate
        $('#cm_raw').hide('blind', {}, 250, function() {
          $('#cm_gen').show('blind', {}, 250)
        })
      } else if (value == 1) {
        $('#cm_gen').hide('blind', {}, 250, function() {
          $('#cm_raw').show('blind', {}, 250)
        })
      }
    }
    
    function hideHelp() {
      $('#help').hide()
      $('#grot').show()
    }
    
    function showHelp() {
      hideCMmenu()
      hideCASmenu()
      $('#help').show()
      $('#grot').hide()
    }
    
    function showHM() {
      $('#hm').animate({width:100}, 500, function() {
          $('#hm').html('About project')
        })
    }
    
    function hideHM() {
      $('#hm').html('')
      $('#hm').animate({width:30}, 500, function() {
        })
    }
    
    function showCAS() {
      $('#cas').animate({width:100}, 500, function() {
          $('#cas').html('New structure')
        })
    }
    
    function hideCAS() {
      $('#cas').html('')
      $('#cas').animate({width:30}, 500, function() {
        })
    }
    
    function showCM() {
      $('#cm').animate({width:100}, 500, function() {
          $('#cm').html('New morphism')
        })
    }
    
    function hideCM() {
      $('#cm').html('')
      $('#cm').animate({width:30}, 500, function() {
        })
    }
    
    function showCASmenu() {
      hideCAS()
      hideCMmenu()
      $('#creategroupform').show("blind", {}, 500)
    }
    
    function hideCASmenu() {
      $('#creategroupform').hide("blind", {}, 500)
    }
    
    function showCMmenu() {
      hideCM()
      hideCASmenu()
      $('#createmorphismform').show("blind", {}, 500)
    }
    
    function hideCMmenu() {
      $('#createmorphismform').hide("blind", {}, 500)
    }
    </script>
  </head>

  <body style="background-color:#f4f4f4; margin:0px; padding:0px;">
    <div id="head" style="text-align:center; height:75px;" class="ui-widget-content ui-corner-bottom">
      <h1>Project Grothendieck</h1>
    </div>
    <div id="base" style="margin:15px;">
      
      <div id="menu" style="position:fixed; left:0px; top:92px; vertical-align:middle; z-index:1;">
          <div id="cas" onmouseover="showCAS();" onmouseout="hideCAS();" onclick="showCASmenu(); hideHelp();" class="ui-widget-header ui-corner-right"
                style="padding-left:5px; background:#ddd; width:30px; height:50px; font-size:14pt;">
          </div>
          <div id="cm" onmouseover="showCM();" onmouseout="hideCM();" onclick="showCMmenu(); hideHelp();" class="ui-widget-header ui-corner-right" 
                style="padding-left:5px; background:#ddd; width:30px; height:50px; font-size:14pt;">
          </div>
          <div id="hm" onmouseover="showHM();" onmouseout="hideHM();" onclick="showHelp();" class="ui-widget-header ui-corner-right" 
                style="padding-left:5px; background:#ddd; width:30px; height:50px; font-size:14pt;">
          </div>
      </div>
      
      <div id="main" style="padding-left:25px;">
        <div id="help" style="display:block;">
          <h3>General information</h3>
          
          <p> Project Grothendieck is a visualizer of algebraic structures like groups or monoids. You can create algebraic structures with predefined generators or define it manually. Also you can create morphisms.
          <p> Authors:
            <ul>
              <li>Artur Huletsky</li>
              <li>Arseny Mayorov</li>
              <li>Anton Storozhev</li>
            </ul>
          <p> This project was made in time of <a href="http://mit.spbau.ru/en/about">St. Petersburg Academic Universtity</a> Developer Days (Fall 2012)
          
        </div>
        <div id="helponformat">
          <h3>Raw format description</h3>
            Raw format for algebraic structures and morphisms is based on <a href="http://www.json.org/">JSON</a>.
          <h4>Algebraic structures</h4>
            <pre>
{
  name: "c_4",
  elements: [1, "i", -1, "-i"],
  neutral:1,
  operation:
    [[ 1, "i", -1, "-i"],
     ["i", -1, "-i", 1],
     [-1, "-i", 1, "i"],
     ["-i", 1, "i", -1]]
}
            </pre>
            <ul>
              <li>
                <pre>name</pre> name of algebraic structure
              </li>
              <li>
                <pre>elements</pre> array of elements of algebraic structure. Note that neutral element should be <b>first</b>
              </li>
              <li>
                <pre>neutral</pre> explicit declaration of neutral element of algebraic structure
              </li>
              <li>
                <pre>operation</pre> two-dimensional array representing Cayley table for algebraic structure. Note that first row and first column of table should match array of elements.
              </li>
            </ul>
          <h4>Morphisms</h4>
            <pre>
{
  name:"m3",
  from:"g_3",
  to: "g_3",
  map:
    [[1,1],
     [2,3],
     [3,4],
     [4,2]]
}
            </pre>
            <ul>
              <li><pre>name</pre> name of morphism
              </li>
              <li><pre>from</pre> name of algebraic structure that is domain
              </li>
              <li><pre>to</pre> name of algebraic structure that is codomain
              </li>
              <li><pre>map</pre> array of [x, y] where x from domain and y from codomain. Morphism maps x to y.
              </li>
            </ul>
        </div>
        <div id="itemtoshow" style="display:none;">
          Select item to show:
            <select width=400>
            </select><br/>
        </div>
        
        <!-- CREATE AS FORM -->
        <div id="creategroupform" class="ui-corner-all ui-widget-content" style="width:400px; text-align:center; display:none; background:#ccc; position:fixed;">
          <div style="position:relative; top:0px; float:right;"><a href="#" onclick="hideCASmenu();">X</a></div>
          <h3>Create new algebraic structure</h3>
          Select creation method:
            <select onchange="ASselect_changed(this);">
              <option value="0">Generate</option>
              <option value="1">From raw data</option>
            </select><br/>
            <div id="cas_raw" style="display:none;">
            Raw data (see format description <a href="#">here</a>):<br/>
            <textarea>
            
            </textarea><br/>
            <button>Create!</button>
           </div>
          <div id="cas_gen" style="display:block;">
            Select generator:
            <select>
              <option>Rem(n)+</option>
              <option>Rem(n)*</option>  
            </select><br/>
            Generator option:<input type="text"></input><br/>
            <button>Generate!</button>
          </div>
        </div>
        
        <!-- CREATE MORPHISM FORM -->
        <div id="createmorphismform" class="ui-corner-all ui-widget-content" style="position:fixed; display:none; width:400px; text-align:center; background:#ccc">
          <div style="position:relative; top:0px; float:right;"><a href="#" onclick="hideCMmenu();">X</a> </div>
        <h3>Create new morphism</h3>
            Select creation method:
            <select onchange="Mselect_changed(this);">
              <option value="0">Using generator</option>
              <option value="1">From raw data</option>
            </select><br/>
          <div id="cm_raw" style="display:none;">
            Raw data (see format description <a href="#">here</a>):<br/>
            <textarea cols="45" rows="10"></textarea><br/>
            <button>Create!</button>
            <br/>
          </div>
          <div id="cm_gen" style="display:block;">
            Select first algebraic structure:
            <select>
              <option>Rem(4)+</option>
              <option>Rem(5)+</option>
              <option>C4</option>
            </select><br/>
            Select second algebraic structure:
            <select>
              <option>Rem(4)+</option>
              <option>Rem(5)+</option>
              <option>C4</option>
            </select><br/>
            Select generator:
            <select>
              <option>Random morphism</option>
            </select><br/>
            Generator option:<input type="text"></input><br/>
            <button>Generate!</button>
          </div>
        </div>
      <div id="grot" style="display:none;" >grot here!!</div>
      </div>
      <div id="notifier" class="ui-corner-all ui-widget-content" style="display:none; position:fixed; left:40px; top:92px; width:400px; background:#f88">
            <h3 style="text-align:center;">Errors</h3>
            <div id="errors" style="position:relative;">
            </div>
            <center>
              <button onclick="hideErrors();">OK</button>
            </center>
        </div>

    </div>
  </body>
</html>